<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="生成"
    cancelText="取消"
  >
    <a-spin :spinning="confirmLoading">
      <a-descriptions>
        <a-descriptions-item label="需求数量">
          {{ oaFixtureReqModel.requestNum ? oaFixtureReqModel.requestNum + '台' : '/' }}</a-descriptions-item
        >
        <a-descriptions-item label="申请原因">
          {{ oaFixtureReqModel.requestReason }}
        </a-descriptions-item>
        <a-descriptions-item label="需求日期">
          {{ oaFixtureReqModel.requestDate }}
        </a-descriptions-item>
        <a-descriptions-item label="物料编码">
          {{ oaFixtureReqModel.materialCode }}
        </a-descriptions-item>
        <a-descriptions-item label="实际已制作台数">
          {{ oaFixtureReqModel.actualNum ? oaFixtureReqModel.actualNum + '台' : '/' }}
        </a-descriptions-item>
      </a-descriptions>

      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="fixReqFromModel">
        <!-- 主表单区域 -->
        <div>
          <strong>工装类型: </strong>
          <a-radio-group name="radioGroup" v-model="fixReqFromModel.fixturetool_name" button-style="solid">
            <a-radio-button value="测试工装">
              测试工装
            </a-radio-button>
            <a-radio-button value="烧录工装">
              烧录工装
            </a-radio-button>
          </a-radio-group>
        </div>
        <br />

        <a-divider orientation="left">
          待生成工装治具列表
        </a-divider>
        <!-- 子表单区域 -->

        <a-row type="flex" style="margin-bottom:10px" :gutter="16">
          <a-col :span="9"><strong>工装编号</strong></a-col>
          <a-col :span="5"><strong>物料编码</strong></a-col>
          <a-col :span="2"><strong>操作</strong></a-col>
        </a-row>

        <a-row
          type="flex"
          style="margin-bottom:10px"
          :gutter="16"
          v-for="(item, index) in fixReqFromModel.fixtureToolList"
          :key="index"
        >
          <a-col :span="9">
            <a-form-model-item label="ZB-ZZ-005-">
              <a-input
                type="number"
                style="margin-left: 3px"
                min="1"
                v-model="item.fixtureCode"
                placeholder="限数字,不填则自动生成"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item>
              <a-input
                placeholder="物料编码"
                v-model="item.materialCode"
                :defaultValue="oaFixtureReqModel.materialCode"
                disabled
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="2">
            <a-form-model-item>
              <a-icon type="minus-circle" @click="delRowCustom(index)" style="fontSize :20px" />
            </a-form-model-item>
          </a-col>
          <!--        预制 一行-->
        </a-row>
        <a-button type="dashed" style="width: 99%;margin-top: 10px" @click="addRowCustom">
          <a-icon type="plus" /> 添加工装信息
        </a-button>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { addFixtureTool } from '@/api/api'
import JDate from '@/components/jeecg/JDate'

export default {
  name: 'CreateFixtureToolModal',
  components: {
    JDate
  },
  data() {
    return {
      title: '创建工装标签',
      numInputValue: 0,
      //申请制作台数
      requestNum: 0,
      //原始的申请信息记录
      oaFixtureReqModel: {},

      //要提交的表单信息
      fixReqFromModel: {
        //要提交的治具列表
        fixturetool_name: '',
        fixtureToolList: [{}]
      },
      visible: false,
      //默认测试工装
      defaultFixType: 1,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,

      url: {
        add: '/fixtureToolCtrl/add'
      }
    }
  },
  created() {
    //赋予radio默认值
    this.fixReqFromModel.fixturetool_name = '测试工装'
  },
  methods: {
    open(record) {
      console.log('生成标签', record)
      this.requestNum = record.requestNum
      this.oaFixtureReqModel = Object.assign({}, record)
      this.visible = true
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.oaFixtureReqModel = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$refs.form.resetFields()
      this.$emit('close')
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      //创建工装信息,生成标签信息
      this.fixReqFromModel.oaFixFlowReqId = this.oaFixtureReqModel.id

      addFixtureTool(this.fixReqFromModel).then(res => {
        if (res.success) {
          //成功notice
          this.confirmLoading = false
          this.$notification['success']({
            message: '创建标签成功!',
            description: res.message
          })
          this.$emit('ok')
          this.close()
        } else {
          this.$message.error(res.message)
          this.$emit('cancle')
          this.close()
        }
        this.fixReqFromModel.fixtureToolList = [{}]
      })
    },
    handleCancel() {
      //清空
      this.fixReqFromModel.fixtureToolList = [{}]
      this.$emit('ok')
      this.close()
    },
    //新增一行
    addRowCustom() {
      //因为默认预制有一行,所以length+1
      let current_index = this.fixReqFromModel.fixtureToolList.length + 1
      if (current_index > this.requestNum - this.oaFixtureReqModel.actualNum) {
        this.$message.warning('超过最大申请数量!')
        return
      }

      this.fixReqFromModel.fixtureToolList.push({})
      this.$forceUpdate()
    },
    //删减一行
    delRowCustom(index) {
      console.log(index)
      this.fixReqFromModel.fixtureToolList.splice(index, 1)
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}
.ant-form-item-control {
  line-height: 0px;
}
/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}
/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>
